<html>
<head>
<title>Develop VIPVN.ORG with Bootstrap</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/bootstrap-theme.min.css"></link>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse" role="navigation">
  <div class="container">
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="#">Project name</a>
	</div>
	<div class="collapse navbar-collapse">
	  <ul class="nav navbar-nav">
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#about">About</a></li>
		<li><a href="#contact">Contact</a></li>
	  </ul>
	</div><!--/.nav-collapse -->
  </div>
</div>

<div class="container">
<div id="mainSlide" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#mainSlide" data-slide-to="0" class="active"></li>
    <li data-target="#mainSlide" data-slide-to="1"></li>
    <li data-target="#mainSlide" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="images/Software-Development-960x600.jpg" alt="Software developer">
      <div class="carousel-caption">
        Provider outsourcing service ...
      </div>
    </div>
    <div class="item">
      <img src="images/online-reservation-software-features.jpg" alt="Building the full house">
      <div class="carousel-caption">
        After that building family's house ...
      </div>
    </div>
	<div class="item">
      <img src="images/Body-Design-Software-Car-600x960.jpg" alt="Buy some cars">
      <div class="carousel-caption">
        Finally buy some special cars for our collection ...
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#mainSlide" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#mainSlide" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
</div>
<script type="text/javascript">
	$('.carousel').carousel({
	interval: 2000
	})
</script>
</body>
</html>